<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="convert/design.css"/>

    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    <script type="text/javascript" src="jquery/env.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>


</head>
<body class="easyui-layout">
<div id="menu" data-options="region:'west',title:'组件'" style="width: 150px">
    <a id="menu_read_jdbc"></a>

</div>
<div id="design" data-options="region:'center',title:'设计器'">
    <div id="step1" class="design-step">
        <div class="step-icon step-icon-read-jdbc"></div>
        <div class="step-title">step1</div>
    </div>
    <div id="step2" class="design-step">
        <div class="step-icon step-icon-read-jdbc"></div>
        <div class="step-title">step2</div>
    </div>


</div>


</body>
<script>
    function showStepMenu() {
        console.log(this)
        console.log($(this))

    }
    function stepLine(from,to) {
        var fromPos = from.offset();
        var toPos = to.offset();
        console.log(fromPos,toPos)
        var fromTop = fromPos.top;
        var fromLeft = fromPos.left;
        var toTop = toPos.top;
        var toLeft = toPos.left;


        if(fromTop==toTop){
            console.log('水平直线')
            var width = toLeft-fromLeft-38
            var top=60+18;
            var left = 60+34;
            var line = $('<div class="step-line" style="left:'+left+'px;top:'+top+'px;width:"'+width+'px;></div>');
            line.appendTo($('#design'))
            console.log(top,left,width)
        }else if(fromLeft==toLeft) {
            console.log('垂直直线')
        }else{
            console.log('斜直线')
        }
    }


    $(function () {
        var units = [
            {unitType: 'READ_JDBC', title: '表输入1', id: 'step1', x: 100, y: 120},
            {unitType: 'READ_JDBC', title: '表输入2', id: 'step2', x: 200, y: 120, fromStep: 'step1'}
        ];

        $("#menu_read_jdbc").linkbutton({
            width: 120,
            height: 36,
            plain: true,
            text: '表输入',
            iconCls: 'icon-read-jdbc',
            onClick: function () {
                $("#dp").append('<div class="unit-read-jdbc" style="width: 50px;height: 36px; border: #3d3d3d solid 1px; left:200px;">表输入</div>');
                $("#dp .unit-read-jdbc").draggable({
                    onEndDrag: function (e) {
                        console.log('---onEndDrag---')
                        console.log(e)
                        let x = e.data.left
                        let y = e.data.top
                        console.log("(" + x + "," + y + ")")
                    },
                }).css({position: 'absolute', left: '300px', top: '25px'});

            }
        });

        $("#step1").css({left: 60, top: 60}).draggable({
            onEndDrag: function (e) {
                console.log('---onEndDrag---')
                console.log(e)
            },
        });
        $("#step2").css({left: 200, top: 60}).draggable({
            onEndDrag: function (e) {
                console.log('---onEndDrag---')
                console.log(e)
            },
        });
        stepLine($("#step1"),$("#step2"));

        $(".step-icon").click(function () {
            console.log('click')
        }).dblclick(function () {
            console.log('dblclick')

        });

    })

</script>
</html>
